<template>
	<div class="magiccubestyle">
		<!-- 标题 -->
		<h2>{{ datas.text }}</h2>

		<el-tabs type="border-card" :stretch="true">
			<el-tab-pane label="内容">
				<div class="decorate-card">
					<div class="title">魔方样式</div>
					<div class="mb20">
						<!-- 图片布局 -->
						<!-- 一行二个 -->
						<section class="buju buju0" v-show="datas.rubiksCubeType === 0">
							<div
								@click="imgActive = index - 1"
								v-for="index in 2"
								:key="index"
								class="rubiksCubeType0 rubiksCubeType"
								:class="[index - 1 === imgActive ? 'active' : '']"
							>
								<div style="font-size: 12px" v-if="!datas.list[index - 1].src">宽度375像素</div>
								<el-image v-else :src="STATIC_URL + datas.list[index - 1].src" fit="cover" class="cover-image" />
								<!--								<img draggable="false" v-else :src="STATIC_URL + datas.list[index - 1].src" alt="" />-->
							</div>
						</section>

						<!-- 一行三个 -->
						<section class="buju buju0" v-show="datas.rubiksCubeType === 1">
							<div
								@click="imgActive = index - 1"
								v-for="index in 3"
								:key="index"
								class="rubiksCubeType1 rubiksCubeType"
								:class="[index - 1 === imgActive ? 'active' : '']"
							>
								<div style="font-size: 12px" v-if="!datas.list[index - 1].src">宽度250像素</div>
								<el-image v-else :src="STATIC_URL + datas.list[index - 1].src" fit="cover" class="cover-image" />
								<!--								<img draggable="false" v-else :src="STATIC_URL + datas.list[index - 1].src" alt="" />-->
							</div>
						</section>

						<!-- 一行四个 -->
						<section class="buju buju0" v-show="datas.rubiksCubeType === 2">
							<div
								@click="imgActive = index - 1"
								v-for="index in 4"
								:key="index"
								class="rubiksCubeType2 rubiksCubeType"
								:class="[index - 1 === imgActive ? 'active' : '']"
							>
								<div style="font-size: 12px" v-if="!datas.list[index - 1].src">宽度188像素</div>

								<el-image v-else :src="STATIC_URL + datas.list[index - 1].src" fit="cover" class="cover-image" />
								<!--								<img draggable="false" v-else :src="STATIC_URL + datas.list[index - 1].src" alt="" />-->
							</div>
						</section>

						<!-- 二左二右 -->
						<section class="buju buju0" v-show="datas.rubiksCubeType === 3">
							<div
								@click="imgActive = index - 1"
								v-for="index in 4"
								:key="index"
								class="rubiksCubeType3 rubiksCubeType"
								:class="[index - 1 === imgActive ? 'active' : '']"
							>
								<div style="font-size: 12px" v-if="!datas.list[index - 1].src">375x375像素<br />或同等比例</div>
								<el-image v-else :src="STATIC_URL + datas.list[index - 1].src" fit="cover" class="cover-image" />
								<!--								<img draggable="false" v-else :src="STATIC_URL + datas.list[index - 1].src" alt="" />-->
							</div>
						</section>

						<!-- 一左二右 -->
						<section class="buju buju4" v-show="datas.rubiksCubeType === 4">
							<div
								@click="imgActive = 0"
								class="rubiksCubeType4 rubiksCubeType"
								style="width: 163px; height: 300px"
								:class="[0 === imgActive ? 'active' : '']"
							>
								<div style="font-size: 12px" v-if="!datas.list[0].src">375x750像素<br />或同等比例</div>
								<el-image v-else :src="STATIC_URL + datas.list[0].src" fit="cover" class="cover-image" />
								<!--								<img draggable="false" v-else :src="STATIC_URL + datas.list[0].src" alt="" />-->
							</div>
							<div style="display: inline-flex; flex-direction: column">
								<div
									@click="imgActive = index"
									class="rubiksCubeType4 rubiksCubeType"
									:class="[index === imgActive ? 'active' : '']"
									v-for="index in 2"
									:key="index"
								>
									<div style="font-size: 12px" v-if="!datas.list[index].src">375x375像素<br />或同等比例</div>
									<el-image v-else :src="STATIC_URL + datas.list[index].src" fit="cover" class="cover-image" />
									<!--									<img draggable="false" v-else :src="STATIC_URL + datas.list[index].src" alt="" />-->
								</div>
							</div>
						</section>

						<!-- 一上二下 -->
						<section class="buju buju5" v-show="datas.rubiksCubeType === 5">
							<div
								@click="imgActive = 0"
								class="rubiksCubeType4 rubiksCubeType"
								style="width: 325px; height: 163px"
								:class="[0 === imgActive ? 'active' : '']"
							>
								<div style="font-size: 12px" v-if="!datas.list[0].src">375x750像素<br />或同等比例</div>
								<el-image v-else :src="STATIC_URL + datas.list[0].src" fit="cover" class="cover-image" />
								<!--								<img draggable="false" v-else :src="STATIC_URL + datas.list[0].src" alt="" />-->
							</div>
							<div style="display: inline-flex">
								<div
									@click="imgActive = index"
									class="rubiksCubeType4 rubiksCubeType"
									:class="[index === imgActive ? 'active' : '']"
									v-for="index in 2"
									:key="index"
								>
									<div style="font-size: 12px" v-if="!datas.list[index].src">375x375像素<br />或同等比例</div>
									<el-image v-else :src="STATIC_URL + datas.list[index].src" fit="cover" class="cover-image" />
									<!--									<img draggable="false" v-else :src="STATIC_URL + datas.list[index].src" alt="" style="width: 163px; height: 163px" />-->
								</div>
							</div>
						</section>

						<!-- 一左三右 -->
						<section class="buju buju4" v-show="datas.rubiksCubeType === 6">
							<!-- 第一张图片 -->
							<div
								@click="imgActive = 0"
								class="rubiksCubeType4 rubiksCubeType"
								style="width: 163px; height: 325px"
								:class="[0 === imgActive ? 'active' : '']"
							>
								<div style="font-size: 12px" v-if="!datas.list[0].src">375x750像素<br />或同等比例</div>
								<el-image v-else :src="STATIC_URL + datas.list[0].src" fit="cover" class="cover-image" />
								<!--								<img draggable="false" v-else :src="STATIC_URL + datas.list[0].src" alt="" />-->
							</div>
							<div style="display: inline-flex; flex-direction: column">
								<!-- 第二张图片 -->
								<div @click="imgActive = 1" class="rubiksCubeType4 rubiksCubeType" :class="[1 === imgActive ? 'active' : '']">
									<div style="font-size: 12px" v-if="!datas.list[1].src">375x375像素<br />或同等比例</div>
									<!--									<img draggable="false" v-else :src="STATIC_URL + datas.list[1].src" alt="" />-->
									<el-image v-else :src="STATIC_URL + datas.list[1].src" fit="cover" class="cover-image" />
								</div>
								<div class="rubiksCubeType4 rubiksCubeType">
									<div
										@click="imgActive = index + 1"
										:class="[index + 1 === imgActive ? 'active' : '']"
										style="display: inline-flex; width: 82px; height: 163px; justify-content: center; align-items: center"
										v-for="index in 2"
										:key="index"
									>
										<div style="font-size: 12px" v-if="!datas.list[index + 1].src">188x375像素<br />或同等比例</div>
										<el-image v-else :src="STATIC_URL + datas.list[index + 1].src" fit="cover" class="cover-image" />
										<!--										<img draggable="false" v-else :src="STATIC_URL + datas.list[index + 1].src" alt="" />-->
									</div>
								</div>
							</div>
						</section>
					</div>
					<!-- 表单 -->
					<el-form :model="datas">
						<section v-for="(item, index) in datas.list" :key="index" v-show="imgActive === index" class="mb20">
							<el-form-item label="上传图片">
								<div class="sd-flex">
									<div class="choice-image choice-image-delete" @click="openFileChoiceDialog()">
										<el-image v-if="item.src != ''" :src="STATIC_URL + item.src" fit="cover" class="cover-image" />
										<el-icon v-else>
											<ele-Plus />
										</el-icon>

										<div class="delete-content" @click.stop="item.src = ''" v-if="item.src != ''">
											<SvgIcon name="ele-DeleteFilled"></SvgIcon>
										</div>
									</div>
								</div>
							</el-form-item>

							<el-form-item label="链接">
								<el-input v-model="item.url">
									<template #append>
										<el-button class="ml5 mr5" @click="openChoiceData(index)">选择</el-button>
									</template>
								</el-input>
							</el-form-item>
						</section>

						<div class="title">魔方风格</div>

						<el-form-item label="风格样式">
							<el-radio-group v-model="datas.rubiksCubeType">
								<!-- works when <2.6.0, deprecated act as value when >=3.0.0 -->
								<el-radio-button :label="0" size="small">
									<template #default>
										<span class="icon decorate-iconfont icon-yihangerge"></span>
									</template>
								</el-radio-button>
								<el-radio-button :label="1" size="small">
									<template #default><span class="icon decorate-iconfont icon-yihangsange"></span></template>
								</el-radio-button>
								<el-radio-button :label="2" size="small">
									<template #default><span class="icon decorate-iconfont icon-yihangsige"></span></template>
								</el-radio-button>
								<el-radio-button :label="3" size="small">
									<template #default><span class="icon decorate-iconfont icon-erzuoeryou"></span></template>
								</el-radio-button>
								<el-radio-button :label="4" size="small">
									<template #default><span class="icon decorate-iconfont icon-yizuoeryou"></span></template>
								</el-radio-button>
								<el-radio-button :label="5" size="small">
									<template #default><span class="icon decorate-iconfont icon-yishangerxia"></span></template>
								</el-radio-button>
								<el-radio-button :label="6" size="small">
									<template #default><span class="icon decorate-iconfont icon-yizuosanyou"></span></template>
								</el-radio-button>
							</el-radio-group>
						</el-form-item>
						<!-- 商品样式选择 -->
						<!-- <div class="rubiksCubeType">
							<el-tooltip class="item" effect="dark" :content="item.content" placement="bottom" v-for="(item, index) in rubiksCubeTypes" :key="index">
								<span
									class="iconfont"
									style="font-size: 21px"
									:class="[item.linktype === datas.rubiksCubeType ? 'active' : '', item.icon]"
									@click="datas.rubiksCubeType = index"
								/>
							</el-tooltip>
						</div> -->

						<div class="title">样式</div>
						<el-form-item label="上圆角">
							<div class="flex">
								<el-slider class="ml20" v-model="datas.borderRadiusTop" />
								<el-input class="ml20" v-model="datas.borderRadiusTop"></el-input>
							</div>
						</el-form-item>
						<el-form-item label="下圆角">
							<div class="flex">
								<el-slider class="ml20" v-model="datas.borderRadiusBottom" />
								<el-input class="ml20" v-model="datas.borderRadiusBottom"></el-input>
							</div>
						</el-form-item>
						<el-form-item label="圆角">
							<div class="flex">
								<el-slider class="ml20" v-model="datas.space" />
								<el-input class="ml20" v-model="datas.space"></el-input>
							</div>
						</el-form-item>
					</el-form>
				</div>
			</el-tab-pane>
			<el-tab-pane label="样式">
				<DataStyle :datas="datas.dataStyle"></DataStyle>
			</el-tab-pane>
			<el-tab-pane label="数据">
				<StyleComponentData :datas="datas"></StyleComponentData>
			</el-tab-pane>
		</el-tabs>

		<!-- 上传图片 -->

		<FileChoice ref="FileChoiceRef" @choiceFile="choiceFile"></FileChoice>
		<PageData ref="PageDataRef" @choice="choicePage"></PageData>
	</div>
</template>

<script setup name="magiccubestyle">
import { defineAsyncComponent, ref } from 'vue';
import { STATIC_URL } from '/@/utils/config';
const FileChoice = defineAsyncComponent(() => import('/@/views/file/choice/index.vue'));
const FileChoiceRef = ref();

const PageData = defineAsyncComponent(() => import('/@/views/shop/data/page/choice/index.vue'));
const PageDataRef = ref();

const emits = defineEmits(['refreshScroll']);
const props = defineProps({
	datas: {},
});

let imgActive = ref(0);
const choiceFile = (res) => {
	props.datas.list[imgActive.value].src = res[0].visitRelativePath;
	emits('refreshScroll');
};

const openFileChoiceDialog = () => {
	FileChoiceRef.value.openFileChoiceDialog();
};

let choicePageIndex = 0;
const openChoiceData = (index) => {
	PageDataRef.value.openDialog();
	choicePageIndex = index;
};

const choicePage = (res) => {
	console.log('choice page res: ', res);
	props.datas.list[choicePageIndex].url = res.urlContent;
};
</script>

<style scoped lang="scss">
.magiccubestyle {
	width: 100%;
	// position: absolute;
	// left: 0;
	// overflow: hidden;
	// top: 0;
	//padding: 0 10px 20px;
	box-sizing: border-box;
	/* 标题 */
	h2 {
		padding: 24px 16px 24px 0;
		margin-bottom: 15px;
		border-bottom: 1px solid #f2f4f6;
		font-size: 18px;
		font-weight: 600;
		color: #323233;
	}

	/* 布局 */
	.buju {
		&.buju0 {
			display: flex;
			justify-content: space-around;
			flex-wrap: wrap;
		}
		&.buju4 {
			display: inline-flex;
			flex-direction: row;
			justify-content: space-around;
		}
		.active {
			background: #e0edff;
			border: 1px solid #155bd4;
			color: #155bd4;
			z-index: 2;
		}
		.rubiksCubeType {
			background-color: #fff;
			border: 1px solid #ebedf0;
			display: inline-flex;
			justify-content: center;
			align-items: center;
			color: #7d7e80;
			cursor: pointer;
			&.active {
				background: #e0edff;
				border: 1px solid #155bd4;
				color: #155bd4;
				z-index: 2;
			}
			&.rubiksCubeType0 {
				width: 163px;
				margin: 10px 0;
				height: 150px;
				img {
					width: 100%;
					// height: 200px;
				}
			}
			&.rubiksCubeType1 {
				width: 109px;
				margin: 10px 0;
				height: 150px;
				img {
					width: 100%;
					height: 150px;
				}
			}
			&.rubiksCubeType2 {
				width: 82px;
				margin: 10px 0;
				height: 150px;
				img {
					width: 100%;
					height: 150px;
				}
			}
			&.rubiksCubeType3 {
				width: 163px;
				margin: 10px 0;
				height: 163px;
				img {
					width: 100%;
					height: 100%;
				}
			}
			&.rubiksCubeType4 {
				width: 163px;
				height: 163px;
				img {
					width: 100%;
					height: 100%;
				}
			}
		}
	}

	.lef {
		:deep(.el-form-item__label) {
			text-align: left;
		}
	}

	/* 商品列表 */
	.magiccubestyleList {
		padding: 6px 12px;
		margin: 16px 0px;
		border-radius: 2px;
		background-color: #fff;
		box-shadow: 0 0 4px 0 rgba(10, 42, 97, 0.2);
		display: flex;
		position: relative;

		/* 删除图标 */
		.el-icon-circle-close {
			position: absolute;
			right: -10px;
			top: -10px;
			cursor: pointer;
			font-size: 19px;
		}

		/* 图片 */
		.imag {
			width: 60px;
			height: 60px;
			border-radius: 5px;
			overflow: hidden;
			position: relative;
			cursor: pointer;
			img {
				width: 100%;
				height: 60px;
				display: inline-block;
			}
			span {
				background: rgba(0, 0, 0, 0.5);
				font-size: 12px;
				position: absolute;
				left: 0px;
				bottom: 0px;
				display: inline-block;
				width: 100%;
				text-align: center;
				color: #fff;
				height: 20px;
				line-height: 20px;
			}
			p {
				width: 100%;
				background: #999;
				position: absolute;
				left: 0;
				bottom: 5px;
				color: #fff;
				font-size: 5px;
				text-align: center;
				height: 20px;
			}
		}

		/* 图片字 */
		.imgText {
			width: 80%;
			display: flex;
			flex-direction: column;
			box-sizing: border-box;
			padding-left: 20px;
			justify-content: center;
		}
	}

	/* 列表样式 */
	.rubiksCubeType {
		display: flex;
		justify-content: space-around;
		align-items: center;
		span {
			display: inline-block;
			width: 58px;
			height: 32px;
			text-align: center;
			line-height: 32px;
			background: #fff;
			border: 1px solid #ebedf0;
			color: #979797;
			margin: 0 1px;
			cursor: pointer;
			transition: all 0.5s;

			&:hover {
				border: 1px solid #155bd4;
				color: #155bd4;
			}

			&.active {
				border: 1px solid #155bd4;
				background-color: #e0edff;
				color: #155bd4;
			}
		}
	}
}

.el-tabs--border-card {
	:deep(.el-tabs__content) {
		padding: 0px !important;
	}
	border: 0px;

	:deep(.el-tabs__header) {
		background-color: #d9d9d9 !important;
	}
}

:deep(.el-input-group__append) {
	padding: 0px !important;
}
</style>
